<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/txx.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <my-header @find="doQuery" ref="h"></my-header>
    <nav class="c900 flex" style="margin: 10px auto 0px">
        <div class="flex" style="justify-content: center;">
            <el-link :underline="false"
                     @click="where.brand='' ;query()">全部</el-link>
            <el-link :underline="false" v-for="brand in brandItems"
                     @click="where.brand=brand ;query()">{{brand}}</el-link>
        </div>

        <el-select @change="query" v-model="where.sort" placeholder="请选择排序方式">
            <el-option value="price" label="价格"></el-option>
            <el-option value="intime" label="日期"></el-option>
            <el-option value="stars" label="星级"></el-option>
            <el-option value="state" label="在库状态"></el-option>
        </el-select>
        <el-select @change="query" v-model="where.sc" placeholder="请选择排序方式">
            <el-option value="asc" label="升序"></el-option>
            <el-option value="desc" label="降序"></el-option>
        </el-select>

        <div>
            <el-select v-model="where.price" @change="query">
                <el-option :value="1" label="0~100"></el-option>
                <el-option :value="2" label="101~200"></el-option>
                <el-option :value="3" label="201~500"></el-option>
            </el-select>
        </div>
    </nav>
    <main class="c900 flex" style="background-color: transparent; padding: 0px; justify-content: flex-start">
        <div v-for="c in cars" class="car">
            <img :src="c.image">
            <div>
                <div class="price">￥{{c.price}}<small>元/天</small></div>
                <el-rate v-model="rate"></el-rate>
                <p>{{c.brand}}<br><small>{{c.model}}</small></p>
                <a class="abtn" :href="'detail.html?id='+c.id">租 赁</a>
            </div>
        </div>
        <div style="width: 100%; text-align: center; margin-top: 10px">
            <el-button type="primary" round>更多车辆</el-button>
        </div>
    </main>

</div>
<script>
    var v = new Vue({
        el : "#app",
        data:{
            rate:3.5,
            cars:[],
            // where:{brand:"",model:"",price:3},
            where: {name: "", brand: "", price: 3, model: "", sort:"",sc:"asc"},
            brandItems:[]
        },
        created(){
            if(location.search){
            // ?model=xxxx
            this.where.model = location.search.replace("?model=","");
            // 在JavaScript中，您可以使用内置的decodeURIComponent()函数来解码URL组件。
            // 如果您需要解码整个URL，您可以使用decodeURI()，但这不会处理特殊字符（例如百分比编码）。
            this.where.model = decodeURIComponent(this.where.model);
            }
            this.query();
            axios.get("txx/car/queryBrand").then(res=>{
                this.brandItems = res.data;
            })
        },
        methods:{
            query(){
                axios.get("txx/car/query",{
                    params:this.where
                }).then(res=>{
                    this.cars = res.data;
                });
            },
            doQuery(model) {
                this.where.model = model;
                this.query();
            }
        }
    })
</script>
</body>
</html>